<script setup lang="ts">
import useHomeStore from "@/store/home";
import {ref} from "vue";

const homeStore = useHomeStore();
homeStore.getHosLevelData("hosType")

const $emit = defineEmits(["handlerLevel"])

//等级高亮显示
const defaultActive = ref('')
const handlerHeightShow = (value: string) => {
  defaultActive.value = value
  console.log(value)

  //事件触发
  $emit("handlerLevel", value)
}
</script>

<template>
  <div class="level">
    <span class="title">医院</span>
    <div class="content">
      <div class="left">
        等级:
      </div>
      <div class="right">
        <span class="item" :class="{active: defaultActive===''}" @click="handlerHeightShow('')">全部</span>
        <template v-for="(item,index) in homeStore.hosLevel" :key="index">
          <span class="item" :class="{active: defaultActive===item.value}" @click="handlerHeightShow(item.value)">{{
              item.name
            }}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.level {
  color: #808080;

  .content {
    display: flex;
    margin-top: 20px;

    .right {
      margin-left: 10px;

      span {
        margin-left: 10px;

        &.item:hover {
          cursor: pointer;
          color: red;
        }

        &.active {
          color: red;
        }
      }
    }
  }
}
</style>
